<template>
  <div class="product-card">
    <img :src="product.prodPicture" alt="商品图片" class="product-image" />
    <h2 class="product-name">{{ product.prodName }}</h2>
    <p class="product-description">{{ product.prodCaption }}</p>
    <p class="product-price">价格: ¥{{ product.prodPrice }}</p>
    <p class="product-price">库存: {{ product.prodCount }}</p>
    <div class="button-group">
      <a-button type="default" @click="editProduct">
        修改
      </a-button>
      <a-button danger @click="suspendProduct">下架</a-button>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import request from '../../../util/request';

export default {
  name: 'BusProdCard',
  props: {
    product: {
      type: Object,
      required: true,
    },
  },
  setup(props, root) {

    const router = useRouter();

    const editProduct = () => {
      console.log(`修改商品ID: ${props.product.id}`);
      // 执行修改商品的逻辑
      const query = { prodId: props.product.id };
      router.push({
        path: '/business/myProd/edit',
        query,
      });
    };

    const suspendProduct = () => {
      if (!confirm("您确定要下架商品吗？下架后将直接删除商品，无法恢复！")) {
        return;
      }
      //console.log(`下架商品ID: ${id}`);
      request.post('product/delete', {
        prodid: props.product.id,
        userid: sessionStorage.getItem('userid'),
        role: 'business',
      }).then(res => {
        if (res.data.flag === 'success') {
          message.success('商品下架成功');
          // 刷新商品列表
          refresh();
        } else {
          message.error('商品下架失败，请稍后重试或联系管理员');
        }
      }).catch(err => {
        message.error('商品下架失败' + err);
      });
    }

    const refresh = () => {
      root.emit('refresh');
    };

    return {
      editProduct,
      suspendProduct,
      refresh,
    };
  }
};
</script>

<style src="../../../assets/styles/busProdCard.css" scoped></style>